<template>
 <div>
    <!-- 查询条件 -->
    <div class="orderactivity-header">
      <div class="assign-header">
        <div class="d2-mb-20">药品库存操作记录</div>
        <i class="el-icon-close" style="font-size: 20px; color: #72767b;" @click="close"></i>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="contacts-content">
      <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" :loading="loading" wrapperHeight="calc(100vh - 120px)">
        <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
        <el-table-column slot="type" label="增加/减少" align="center" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.type == '1'" style="color: #67C23A;"> 增加 </span>
            <span v-else-if="scope.row.type == '2'" style="color:#F56C6C"> 减少 </span>
            <span v-else-if="scope.row.type == '3'" style="color:#F56C6C"> 损耗 </span>
          </template>
        </el-table-column>
      </main-table>
    </div>
  </div>
</template>
<script>
import mainTable from "@/components/main-table/index";
import * as APIMedicalCare from '@/api/medicalCare';
import { sex, age, elderlyCategory, sourceType, unixToDate } from "@/utils";
import { mapState } from 'vuex'
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: { mainTable },
  data () {
    return {
      // 查询条件
      searchForm: {
        page: 1
      },
      dialogVisible: false,
      // 员工loading
      columns: [
        {
          index: true
        },
        {
          prop: 'title',
          label: '药品名称',
          width: 190,
        },
        {
          prop: 'code',
          label: '批准文号'
        },
        {
          prop: 'type',
          label: '增加/减少',
          slot: 'type'
        },
        {
          prop: 'current_quantity',
          label: '操作时的数量'
        },
        {
          prop: 'action_quantity',
          label: '操作的数量'
        },
        {
          prop: 'after_quantity',
          label: '操作后的数量'
        },
        {
          prop: 'remark',
          label: '备注',
          width: 350,
        },
        {
          prop: 'create_time',
          label: '操作时间',
          width: 210,
          formatter (row, column, cellValue) {
            return unixToDate(cellValue)
          }
        }
      ],
      tableList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      loading: false,
      is_bind:[]
    }
  },
  mounted () {
    this.searchForm.mid = this.data.id;
    this.fetchTableList()
  },
  methods: {
    // 关闭弹窗
    close () {
      this.$emit('cancle')
    },
    // 手动清空/搜索
    clear () {
      this.fetchTableList()
    },
    // 获取数据
    fetchTableList (pageObj) {
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj
      }
      APIMedicalCare.medicineStocklog(this.searchForm).then((res) => {
        if (res.code == 200) {
          const { list = [], total = 0 } = res.data;
          this.tableList = list || []
          this.pagination.total = total;
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 点击”查询“按钮 => 此时缓存查询参数
    onSearch () {
      this.pagination = {
        current: 1,
        size: 15,
        total: 0
      }
      this.fetchTableList()
    },
    // 重置
    onReset () {
      this.$refs.searchForm.resetFields()
      this.fetchTableList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .assign-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .orderactivity-header{
     padding: 20px;
     padding-bottom: 0px;
  }
  .contacts-content {
   padding: 0 20px;
   padding-bottom: 7px;
  }
</style>
